<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="robots" content="noindex,nofollow">
        <title>{{ pageTitle }}</title>
        <link rel="shortcut icon" href="{{ pathPrefix }}/static/img/favicon.ico?v={{ buildVersion }}">
        <script src="{{ pathPrefix }}/static/vendor/js/jquery-3.3.1.min.js?v={{ buildVersion }}"></script>    
        <script src="{{ pathPrefix }}/static/vendor/js/popper.min.js?v={{ buildVersion }}"></script>
        <script src="{{ pathPrefix }}/static/vendor/bootstrap-4.3.1/js/bootstrap.min.js?v={{ buildVersion }}"></script>

        <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap-4.3.1/css/bootstrap.min.css?v={{ buildVersion }}">
        <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/css/prometheus.css?v={{ buildVersion }}">
        <link type="text/css" rel="stylesheet" href="{{ pathPrefix }}/static/vendor/bootstrap4-glyphicons/css/bootstrap-glyphicons.min.css?v={{ buildVersion }}">

        <script>
            var PATH_PREFIX = "{{ pathPrefix }}";
            var BUILD_VERSION = "{{ buildVersion }}";
            $(function () {
                $('[data-toggle="tooltip"]').tooltip()
            })
        </script>

        {{template "head" .}}
    </head>

    <body>
        <nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-dark">
            <div class="container-fluid">      

                <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-content" aria-expanded="false" aria-controls="nav-content" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                    <!--span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span-->
                </button>

                <a class="navbar-brand" href="{{ pathPrefix }}/">Prometheus</a>


                <div id="nav-content" class="navbar-collapse collapse">
                    <ul class="navbar-nav">
                        {{$consoles := consolesPath}}
                        {{if $consoles}}
                        <li class="nav-item"><a class="nav-link" href="{{$consoles}}">Consoles</a></li>
                        {{ end }}
                        <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/alerts">Alerts</a></li>
                        <li class="nav-item"><a class="nav-link" href="{{ pathPrefix }}/graph">Graph</a></li>
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Status <span class="caret"></span></a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="{{ pathPrefix }}/status">Runtime &amp; Build Information</a>
                                <a class="dropdown-item" href="{{ pathPrefix }}/flags">Command-Line Flags</a>
                                <a class="dropdown-item" href="{{ pathPrefix }}/config">Configuration</a>
                                <a class="dropdown-item" href="{{ pathPrefix }}/rules">Rules</a>
                                <a class="dropdown-item" href="{{ pathPrefix }}/targets">Targets</a>
                                <a class="dropdown-item" href="{{ pathPrefix }}/service-discovery">Service Discovery</a>
                            </div>
                        </li>
                        <li class= "nav-item" >
                            <a class ="nav-link" href="https://prometheus.io/docs/prometheus/latest/getting_started/" target="_blank">Help</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        {{template "content" .}}
    </body>
</html>
